<template>
	<view class="main-cont">
		<view class="top box box-align-center box-pack-between">
			<view class="box box-align-center box-pack-start">
				<view class="icon"></view>
				<view class="box box-tb box-pack-start box-align-center ml10">
					<view class="mb10">
						{{bj.name}}
					</view>
					<view class="box box-align-start box-align-start" style="color: #6E73D8;width: 100%;">
						<u-image src="@/static/home/icon_stu.png" width="29rpx" height="24rpx"></u-image>
						<view class="ml10">
							{{bj.num}}人
						</view>
					</view>
				</view>
			</view>
			<view class="">
				带班老师：{{bj.tr}}
			</view>
		</view>
		<view class="stu-list">
			<view class="list box box-align-center box-pack-between" v-for="(item,index) in stuList" :key="index">
				<view class="box box-align-center">
					<u-avatar :src="item.icon" size="72" mode="circle"></u-avatar>
					<view class="ml5">
						{{item.name}}
					</view>
				</view>
				<view class="">
					{{item.sn!=null?item.sn:'无学号'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dclass:uni.getStorageSync("dclass"),
				bj:{
					num:0,
					tr:'',
					name:''
				},
				stuList:[]
			}
		},
		onLoad() {
			this.listClassStu();
		},
		methods: {
			listClassStu(){
				this.$api.post({url: '/yevalgroup/listClassStu',method: 'post'}, {classid:this.dclass.id}).then(res => {
					this.stuList = res.list;
					this.bj = res.clazz;
					console.log(this.bj);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;
		
		.top {
			padding: 20rpx 40rpx;
			width: 100%;
			height: 141rpx;
			background-color: #fff;
			
			.icon {
				width: 8rpx;
				height: 84rpx;
				background: #FE907E;
				border-radius: 4rpx;
			}
			
		}
		.stu-list {
			margin: 20rpx 14rpx;
			width: 722rpx;
			background-color: #fff;
			.list {
				padding: 60rpx 80rpx;
				width: 100%;
				height: 130rpx;
			}
		}
	}
</style>
